@mixin dark-mode {
  .post-comments {
    .v {
      * {
        color: $dark-main-color;
        background-color: $dark-background-color;
      }

      hr{
        border-color:$dark-main-color;
      }
      blockquote{
        color: $dark-main-color;
        border-left: 8px solid $dark-main-color;
      }
      .vwrap {
        border: 1px solid #000;
        .vheader {
          .vinput {
            border-bottom: 1px #000 dashed;
          }
          .vinput:focus {
            border-bottom-color: #eb5055;
          }
        }
        .vcontrol {
          .col {
            color: $dark-main-color;
          }
        }
        .vmark {
          background: $dark-background-color;
          .valert {
            .vtext {
              color: $dark-main-color;
            }
            .vcode {
              background: #000;
              &:focus {
                border-color: $dark-background-color;
                background-color: #000;
              }
            }
          }
          @media screen and(max-width:720px) {
            .valert {
              .vtext {
                color: $dark-main-color;
              }
            }
          }
        }
      }
      .power {
        color: #999;
      }
      a {
        text-decoration: none;
        color: $dark-main-color;
        &:hover {
          color: $dark-main-hover-color;
        }
      }
      .vbtn {
        color: $dark-main-color;
        border: 1px solid $dark-background-color;
        background: $dark-background-color;
      }
      .vbtn:active,
      .vbtn:hover {
        color: $dark-main-hover-color;
        border-color: #000;
        background-color: #000;
      }
      .vempty {
        color: #999;
      }
      .vlist {
        .vcard {
          .vimg {
            border:1px solid $dark-main-color;
          }
          .vhead {
            .vnick {
              color: #1abc9c;
              &::before{
                background:#1abc9c;
              }
              &:hover {
                color: #D7191A;
              }
            }
            .vsys {
              background: #000;
              color: $dark-main-color;
            }
          }

          .vh {
            border-bottom: 1px dashed #000;
            .vtime {
              color: #b3b3b3;
            }
            .vmeta {
              .vat {
                color: #ef2f11;
              }
            }
          }
          .vcontent {
            color: #4A4A4A;
            &.expand {
              &:before {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
              }
              &:after {
                color: $dark-main-color;
                background: #000;
              }
            }
          }

          .vquote {
            color: $dark-main-color;
            border-left: 1px dashed #000;
          }

        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
